<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			title="帮助说明"
			isShowBackArrow
			:titlePaddingLeft="30"
			:placeholder="true"
		>
		</customHead>
		<view class="main" v-if="naviHeight">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="title">
					<text>{{item.title}}</text>
				</view>
				<view class="item_cont">
					<view class="cont_item" @click="gotoDetail(item1)"  v-for="(item1, index1) in item.child" :key="index1">
						<text>{{item1.extJson}}</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { searchPlugsNoticeList } from '@/tools/request/api.js'
	export default {
		data() {
			return {
				loading_show: false,
				list: [
					{
						title: '',
						child: []
					},
					{
						title: '',
						child: []
					},
					{
						title: '',
						child: []
					},
				]
			};
		},
		onLoad () {
			this.getNoticeList();
		},
		methods: {
			gotoDetail (item) {
				uni.navigateTo({
					url: `/subpack_my/helpDesc/helpDetail/helpDetail?info=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			getNoticeList () {
				let data = {
					page: 1,
					size: 100,
					businessId: this.businessId,
					userServiceToken: this.userServiceToken
				}
				this.loading_show = true;
				searchPlugsNoticeList(data).then((res) => {
					this.loading_show = false;
					if (res.code != 200) return uni.$showMsg();
					let list = res.body.list;
					
					
					this.list[0].child = list.filter((item) => {
						if (item.type == 'caozuo_shuoming') {
							this.list[0].title = item.title;
							return true;
						}
					});
					this.list[1].child = list.filter((item) => {
						if (item.type == 'shouhou_zhengce') {
							this.list[1].title = item.title;
							return true;
						}
					});
					this.list[2].child = list.filter((item) => {
						if (item.type == 'xieyi_gongshi') {
							this.list[2].title = item.title;
							return true;
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		
		.main{
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.item{
				margin-bottom: 30rpx;
				
				.title{
					padding: 30rpx 20rpx;
					font-size: 34rpx;
				}
				.item_cont{
					padding: 0 20rpx;
					font-size: 30rpx;
					background-color: #fff;
					border-radius: 20rpx;
					
					.cont_item{
						display: flex;
						justify-content: space-between;
						padding: 30rpx 0;
						border-bottom: 1rpx solid #ddd;
					}
					.cont_item:last-child{
						border: none;
					}
				}
			}
		}
	}
</style>
